<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDishPage, addDish, updateDish, deleteDish } from '@/api/apis'
import SearchForm from '@/components/business/SearchForm.vue'

// 搜索配置
const searchData = ref([
  { label: '菜品名称', module: 'name', type: 'input' },
  { label: '价格范围', module: 'priceRange', type: 'input', placeholder: '如: 5-15' },
  {}
])

const menuList = ref([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const form = ref({ id: null, name: '', category_id: 4, price: null, description: '' })
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const ruleForm = ref({})



const DINNER_CATEGORY_ID = 3 // 假设4为晚餐分类ID

const fetchPorridgeList = async () => {
  const params = {
    category_id: DINNER_CATEGORY_ID,
    page: currentPage.value,
    size: pageSize.value,
    ...ruleForm.value
  }
  const res = await getDishPage(params)
  if (res.code === 200) {
    menuList.value = res.data.content || res.data.records || []
    total.value = res.data.totalElements || res.data.total || 0
  }
}

// 搜索
function handleSearchBtn(form) {
  ruleForm.value = { ...form }
  currentPage.value = 1
  fetchPorridgeList()
}

// 重置
function handleResetFetch() {
  ruleForm.value = {}
  currentPage.value = 1
  fetchPorridgeList()
}

// 分页
function handlePageChange(page) {
  currentPage.value = page
  fetchPorridgeList()
}

function handleSizeChange(size) {
  pageSize.value = size
  currentPage.value = 1
  fetchPorridgeList()
}

onMounted(fetchPorridgeList)

function handleAdd() {
  isEdit.value = false
  form.value = { id: null, name: '', category_id: DINNER_CATEGORY_ID, price: null, description: '' }
  dialogVisible.value = true
}

function handleEdit(row) {
  isEdit.value = true
  form.value = { ...row, category_id: DINNER_CATEGORY_ID }
  dialogVisible.value = true
}

async function handleDelete(row) {
  await ElMessageBox.confirm('确定要删除该粥类吗？', '提示', { type: 'warning' })
  await deleteDish({ id: row.id })
  ElMessage.success('删除成功')
  fetchPorridgeList()
}

async function handleSave() {
  if (!form.value.name || !form.value.price) {
    ElMessage.warning('请填写完整信息')
    return
  }
  form.value.category_id = DINNER_CATEGORY_ID // 保证每次提交都带上
  if (isEdit.value) {
    await updateDish(form.value)
    ElMessage.success('编辑成功')
  } else {
    await addDish(form.value)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
  fetchPorridgeList()
}
</script>

<template>
  <div class="container">
    <el-card shadow="never" class="menu-card no-border">
      <div class="menu-header">
        <span class="menu-title">粥类配置</span>
        <el-button type="primary" @click="handleAdd">新增粥类</el-button>
      </div>
      
      <!-- 搜索表单 -->
      <SearchForm :searchData="searchData" @searchFetch="handleSearchBtn" @resetFetch="handleResetFetch" />
      
      <el-table :data="menuList" style="width: 100%; margin-top: 16px;" class="no-table-border" :header-cell-style="{ background: '#f5f7fa', color: '#606266'}">
        <el-table-column prop="name" label="菜品名称" min-width="120" />
        <el-table-column prop="price" label="价格(元)" min-width="80" />
        <el-table-column prop="description" label="描述" min-width="150" />
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 16px; text-align: right;justify-content: flex-end;"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        v-model:current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        @update:current-page="handlePageChange"
        @update:page-size="handleSizeChange"
        :hide-on-single-page="false"
      />
    </el-card>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑粥类' : '新增粥类'" width="400px">
      <el-form :model="form" label-width="70px">
        <el-form-item label="菜品名称">
          <el-input v-model="form.name" placeholder="请输入菜品名称" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model.number="form.price" type="number" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" placeholder="请输入菜品描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.menu-title {
  font-size: 20px;
  font-weight: bold;
}
.no-border {
  border: none !important;
  box-shadow: none !important;
}
.no-table-border .el-table__inner-wrapper,
.no-table-border .el-table__body,
.no-table-border .el-table__header {
  border: none !important;
}
.no-table-border .el-table__cell {
  border-bottom: none !important;
}
</style> 